import * as React from 'react';
import { ChatItem, ChatGrOrFrType } from '../../interface/IChat';
import './ChatItem.less';
// import 'antd/es/badge/style/index.less';
import Popover from 'antd/es/popover';
// import 'antd/es/popover/style/';
//import webIM from '../../net/WebIM';
import Utils from '../../utils/utils';
import { getMessageText } from '../messageItem/MessageItem';
import { AvatorWithPhoto } from '../avatorWithPhoto/AvatorWithPhoto';
import SvgIcon from '../svgIcon/SvgIcon';
import { Tag, message } from 'antd';
export interface IChartItemProps extends ChatItem {
	statusDictionary?:any;
	noRead: number;
	isGroup: boolean;
	delChart: (chat: ChatItem) => void;
	toTop: (id: string, isTop: boolean) => void;
	toListTop: (id: string, isListTop: boolean) => void;
	toManualRead: (id: string) => void;
	toNotice: (id: string, isNotice: boolean) => void;
	selected?:boolean
	/** 是否支持右键能力 */
	context?:boolean
}
interface ItemState {
	img: any;
	menuShow: boolean;
	context:boolean
}
export class ChartItem extends React.Component<IChartItemProps, ItemState> {
	constructor(props: IChartItemProps) {
		super(props);
		this.state = {
			img: '',
			menuShow: false,
			context:typeof props.context=='undefined'?true:Boolean(props.context)
		};
	}
	handleSendType = (isShow: boolean) => {
		if( !this.state.context ) return;
		this.setState({
			menuShow: isShow
		});
	};
	delChat = () => {
		this.props.delChart(this.props);
		this.setState({
			menuShow: false
		});
	};
	chatTop = (isTop: boolean) => {
		if( isTop ){
			message.success('该消息已经固定置顶，将始终显示在消息列表顶部');
		}
		this.props.toTop(this.props.id, isTop);
		this.setState({
			menuShow: false
		});
	};
	chatListTop = (isListTop: boolean) => {
		this.props.toListTop(this.props.id, isListTop);
		this.setState({
			menuShow: false
		});
	};
	chatNotice = (isNotice: boolean) => {
		this.props.toNotice(this.props.id, isNotice);
		this.setState({
			menuShow: false
		});
	};
	chatUnRead = () => {
		this.props.toManualRead(this.props.id);
		this.setState({
			menuShow: false
		});
	};
	isNormalUser(){
		if( this.props.isGroup){
			return false;	
		}
		if( Utils.isUserService(this.props.id) ){
			return false;
		}
		return true;
	}
	render() {
		const timeFormate = this.props.lastTime ? Utils.getTimeText(Number(this.props.lastTime), 1, 1) : '';
		let isTop = Boolean(this.props.isTop);
		let isListTop = Boolean(this.props.isListTop);
		let isRemind = Boolean(this.props.isNotice);
		const sendList = (
			<div className="send-list" style={{ maxWidth: '150px' }}>
				<label className="item" onClick={() => this.chatTop(!isTop)}>
					<span>{isTop ? '取消置顶' : '固定置顶'}</span>
				</label>
				<label className="item" onClick={() => this.chatListTop(!isListTop)}>
					<span>{isListTop?'取消列表置顶':'列表置顶'}</span>
				</label>
				<label className="item" onClick={() => this.chatUnRead()}>
					<span>{'标为未读'}</span>
				</label>
				
				<label className="item" onClick={() => this.chatNotice(!isRemind)}>
					<span>{isRemind ? '取消免打扰' : '消息免打扰'}</span>
				</label>
				<label className="item" onClick={this.delChat}>
					<span>删除聊天</span>
				</label>
			</div>
		);

		let content = this.props.lastContent
		content = content === '双向撤回消息' ? '' : content
		const systemDictionary = this.props.statusDictionary?this.props.statusDictionary:{}
		const orderDics = systemDictionary? (systemDictionary['USER_ORDER_STATUS']||[]):[]
		const orderState = (this.props as any).orderState;
		const order = orderDics.find(item=> item['dictValue'] == orderState ) || { cssClass:'green', dictLabel:'', dictValue:''}
		return (
			<div className={`chat-item ${isTop?'top':''}`}>
				<div className="wrapper">
					
					<div className="avator-wraper">
						<AvatorWithPhoto onlineStyle='dot' onlinestate={this.props.onlinestate} type={(this.props.gid!=''&&this.props.isGroup)?ChatGrOrFrType.group:ChatGrOrFrType.friend} id={this.props.id} size={40} classN="head"
						userType={this.props.userType || this.props.toUserType}
						 />
											
						</div>
						<div className="right">
							<Popover
								placement="bottomRight"
								content={sendList}
								trigger="contextMenu"
								visible={this.state.menuShow}
								onVisibleChange={this.handleSendType}
							>
								<div className="right-top">
									<span className="title">
										<span>
											{this.props.isGroup ? this.props.name :  (this.props.remarkName?this.props.remarkName : this.props.name)}
										</span>
										{ this.isNormalUser() && order.dictLabel ? <span style={{marginLeft:'5px'}}><Tag color={ order.cssClass }>{ order.dictLabel } </Tag></span>:null }
										
									</span>
									<span className='time'>{timeFormate}</span>
								</div>
								<div className="content-mes">
									{getMessageText(content,'',this.props.mentionText,true,true,null,null,'', '',true)}
									
								</div>

							</Popover>
						</div>
						{ isTop? <span className="icon-top"><SvgIcon name="common-lock" size='10' color='#FFFFFF'></SvgIcon></span> : null }
						{ isListTop? <span className="icon-top icon-top-list"><SvgIcon name="common-lock" size='10' color='#FFFFFF'></SvgIcon></span> : null }
						<div className="icon-extend">
							{
									this.props.noRead>0
									?  this.props.noRead<100? <span className = "sub-num">{this.props.noRead}</span>:<span className = "sub-num">{"99+"}</span>
									: null
							}
							{
								isRemind ? <SvgIcon name="silence" size='12' color={`${this.props.selected?'#ffffff':'#999FB3'}`}/> : null
							}
						</div>
					</div>
					
			</div>
		);
	}
}
